<template>
	<view class="content">
        <u-navbar :fixed="true" :shadow="true" :safeAreaInsetTop="true" :placeholder="true"
            @leftClick="back" title="工资发放详情"  rightIcon="search" @rightClick="rightClick">
        </u-navbar>

        <view class="uni-area">
            <!-- 工资发放概况 -->
            <uni-item-base class="u-m-t-30" :baseData="generalData" />
        
            <view class="u-m-t-30 u-font-32 font-bold">工资发放附件</view>
            <uni-accessory class="u-m-t-30" :accessorys="accessoryList"></uni-accessory>
  
            <view class="u-m-t-30 u-font-32 font-bold">工资发放列表</view>
            <uni-item-wage-member class="u-m-t-30" v-for="(tem,ind) in page.list" :key="ind" :listItem="tem" />

            <!-- 返回顶部 -->
            <u-back-top :scroll-top="page.scrollTop" @tap="toTop"></u-back-top>
            <!-- 加载更多 -->
            <u-loadmore :status="page.status" />
        </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                // 工资发放概况
                generalData:{
                    line: false,
                    title: '工资发放概况',
                    list:[
                        { filed:'ffgzny', title:'工资期（间）', value:'安薪乐' },
                        { filed:'ffrq', title:'发放日期', value:'安薪乐' },
                        { filed:'sub', title:'涵盖分包企业数', value:'安薪乐' },
                        { filed:'project', title:'涵盖项目数', value:'安薪乐' },
                        { filed:'ffrs', title:'发放人数', value:'安薪乐' },
                        { filed:'sfgzhj', title:'发放金额', value:'安薪乐' },
                    ]
                },
                // 工资发放附件
                accessoryList:[],
                // 分页相关参数
                paging:{
                    pageNum: 1,
                    pageSize: this.$config.pageSize,
                    ywbh: 'kqgzgl_21122516373300000008' // 业务编号
                },
                page:{
                    scrollTop: 0,
                    status: 'nomore',
                    total: 0,
                    list: [], // 列表
                }
			}
		},


        // 页面滚动
        onPageScroll(e){
            this.page.scrollTop = e.scrollTop
        },
        // 页面滚动到底部触发
        onReachBottom(){
            if( this.page.length < this.page.total ){
                this.paging.pageNum += 1
                this.getWageMemberList()
            }else{
                this.page.status = 'nomore'
            }
        },


		onLoad(option) {
            this.paging.ywbh = option.id
            // 工资发放概况
            this.getWageSalaryDetail()
            // 工资发放附件
            this.getMemberAtta()
            // 工资发放列表
            this.getWageMemberList()
        },

		methods: {
            // 返回
            back(){
                uni.navigateBack()
            },
            // 搜索
            rightClick(){
                uni.navigateTo({ url: '/pages/common/search?type=wagemember&ywbh='+this.paging.ywbh })
            },


            // 工资发放概况
            getWageSalaryDetail(){
                uni.showLoading({ title:'工资发放概况' })
                this.$request(this,this.$apis.WageSalaryDetail,{id:this.paging.ywbh}).then(res=>{
                    // console.log('工资发放概况',res)
                    this.generalData.list.map((v,i)=>{
                        if( v.filed == 'sfgzhj' ){
                            v.value = res[v.filed]+'万元'
                        }else{
                            v.value = res[v.filed]
                        }
                    })
                }).then()
            },


            // 工资发放附件
            getMemberAtta(){
                uni.showLoading({ title:'工资发放附件' }) 
                const parameter = {
                    ywlx: 'salary_kqgzgl', // 业务类型【必传】
                    ywbh: this.paging.ywbh, // 业务编号【必传】
                }
                this.$request(this, this.$apis.MemberAtta, parameter).then(res=>{
                    // console.log('工资发放附件',res)
                    this.accessoryList = res
                }).then() 
            },


            // 工资发放列表
            getWageMemberList(){
                this.page.status = 'loading'
                this.$request(this, this.$apis.WageMemberList,this.paging).then(res=>{
                    // console.log('工资发放列表',res)
                    this.page.total = res.total
                    if( res.total != 0 ){
                        this.page.status = 'loadmore'
                        res.data.map((v,i)=>{
                            try {
                                v.zjhm = this.$tools.formatIdentity(v.zjhm)
                            } catch (error) {
                                console.log('身份证号码抛出异常')
                            }
                            v.sfje = v.sfje+'元'
                            this.page.list.push(v)
                        })
                    }else{
                        this.page.status = 'nomore'
                        uni.$u.toast('暂未查询到工资发放列表相关数据')
                    }
                }).then() 
            },


            // 回到顶部
            toTop(){
                uni.pageScrollTo({ scrollTop: 0, duration: 300 })
            },
		}
	}
</script>

<style scoped lang="scss">
    .content{
        .item{
            border-bottom: 1rpx solid #eee;
            &:last-child{
                border: none;
            }
        }
    }
</style>
